<template>
  <div class="manageList">
    <div class="manage-top">
      <ul class="states">
        <!-- <router-link tag="li" :to="{path:'manageState',query:{name:entname,state:state.name}}" v-for="(state, index) in states" :key="index" @click="changecolor(index)"> -->
          <li v-for="(state, index) in states" :key="index">
            <!--  @click="changecolor(index)" -->
            <b :class="{active:state.flag}"></b>
            <span>{{state.name}}</span>
          </li>
        <!-- </router-link> -->
      </ul>
    </div>
    <div class="manage-bottom">
      <div class="lists c-shadow">
        <h3>
          <router-link tag="a" target="_blank" :to="{name:'baseinfo', query: {entname:entname}}">
            {{entname || '--'}}
          </router-link>
          <!-- 返回按钮 -->
          <router-link tag="span" :to="{path:'/managements',query:{state:this.$route.query.state}}" class="returnBtn" v-if="scree !== '历史排查'">
          <!-- <a class="returnBtn" @click.prevent="$router.back(-1)" v-if="scree !== '历史排查'"> -->
            <i class="icon iconfont icon-fanhui"></i>
            返回
          <!-- </a> -->
          </router-link>
        </h3>
        <ul class="info-list">
          <li>
            <span>企业类型：</span>{{baseInfo.type || '--'}}
          </li>
          <li class="min" style="margin-top: -2px;" v-if="riskInfo.beaconValue < 60"><span class="big flames">烽火指数：</span><span class="hot-number">{{riskInfo.totalRiskScore || '--'}}</span></li>
          <li class="min riskNum" v-else><span class="big flames">烽火指数：</span><span class="icon-risk"></span><span class="hot-number" style="margin:2px 0 0 -10px">{{riskInfo.totalRiskScore || '--'}}</span></li>
          <li class="min" :title="baseInfo.legalPerson">
            <span>法人：</span>{{baseInfo.legalPerson || '--'}}
          </li>
          <!-- <li class="min" v-if="controlstit || controlstit === 0">
            <span class="big">状态：</span>
            <!-- {{riskInfo.statusWord || '--'}} /
            {{controlsStatus[controlstit]}}
          </li> -->
          <li class="min">
            <span class="big">监管状态：</span>
            {{riskInfo.statusWord || '--'}}
          </li>
          <li class="min">
            <span>注册时间：</span>{{baseInfo.registerDate | dateFormat}}
          </li>
          <li>
            <span class="big">最新预警时间：</span>{{riskInfo.stepDate5 | dateFormat}}
          </li>
          <li class="min">
            <span>注册资金：</span>{{baseInfo.money ? baseInfo.money + baseInfo.moneyCurrency : '--'}}
          </li>
          <li :title="riskInfo.riskDescription" class="warning-type-word min">
            <span>预警原因：</span>
            {{riskInfo.riskDescription || '--'}}
          </li>
          <li class="min" :title="baseInfo.phone">
            <span class="s-min">注册电话：</span>{{baseInfo.phone || '--'}}
          </li>
          <li class="overflow-hidden long" :title="baseInfo.address">
            <span>注册地址：</span>{{baseInfo.address || '--'}}
          </li>
          <li class="overflow-hidden long" :title="address"><span>经营地址：</span>{{address || '--'}}</li>
        </ul>
      </div>
      <div class="bottom c-shadow">
        <!-- 综合描述 -->
        <div class="detail-con">
          <div class="detailbase">
            <h4 class="detail-base-title">企业风险综合描述</h4>
            <!-- <el-button type="primary" plain class="pridown" @click="reportDownloads(state)" :disabled="isDisable" v-if="scree === '历史排查'">{{downState}}</el-button> -->
          </div>
          <div class="table-wrap">
            <j-loading mode='s' v-show="isShowLoading"></j-loading>
            <table class="business">
              <tr>
                <th>经营风险</th>
                <td :title="jingyingTotal" colspan="3" class="long">{{jingyingTotal | character}}</td>
              </tr>
              <tr>
                <th>舆情风险</th>
                <td :title="yuqingTotal" colspan="3" class="long">{{yuqingTotal | character}}</td>
              </tr>
              <tr>
                <th>关联风险</th>
                <td :title="guanlianTotal" colspan="3" class="long">{{guanlianTotal | character}}</td>
              </tr>
              <tr>
                <th>传播风险</th>
                <td :title="chuanboTotal" colspan="3" class="long">{{chuanboTotal | character}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="down">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  jLoading,
  jDialog,
  jNoData
} from '../../components'
import {
  management as mpi,
  entdetail as api
} from '../../api'
export default {
  data() {
    return {
      state:'',
      scree: '',
      name:'',
      entname: '',
      address: '',
      controlsStatus:['一般状态', '重点监控', '设为安全', '已处理', '白名单企业'],
      controlstit:'',
      // 表头属性
      states: [
        {
          name:'企业预警',
          flag: false
        },
        {
          name:'线上排查',
          flag: false
        },
        {
          name:'线下排查',
          flag: false
        },
        {
          name:'归档',
          flag: false
        }
      ],
      // 历史排查情况
      history: { },
      isDisable: false,
      // 下载
      downState: '风险报告',
      // 企业综合描述显示状态
      isShowLoading: false,
      show: false,
      // items
      items: [],
      jingyingTotal: '',
      yuqingTotal: '',
      guanlianTotal: '',
      chuanboTotal: '',
      // 基本信息
      baseInfo: { },
      riskInfo: { },
      status: ['一般监控', '重点监控', '设为安全', '排查处理', '白名单']
    }
  },
  components: {
    jLoading,
    jDialog,
    jNoData
  },
  mounted() {
    this.entname = this.$route.query.name || ''
    this.id = this.$route.query.id || ''
    this.scree = this.$route.query.scree || ''
    if (this.$route.query.state) {
      this.state = this.states[this.$route.query.state].name || ''
      this.states.map(state => {
        state.flag = false
        if (state.name === this.state) {
          state.flag = true
        }
      })
    }
    this.getInfoLists()
    this.getriskDescribe()
  },
  watch: { },
  methods: {
    // state改变color
    jingying() {
      let params = {
        entName: this.entname
      }
      api.getriskOperationDescribe(params).then(rtn => {
        this.jingyingTotal = rtn.data
      })
    },
    yuqing() {
      let params = {
        entName: this.entname
      }
      api.getriskOpinionDescribe(params).then(rtn => {
        this.yuqingTotal = rtn.data
      })
    },
    guanlian() {
      let params = {
        entName: this.entname
      }
      api.getriskRelationDescribe(params).then(rtn => {
        this.guanlianTotal = rtn.data
      })
    },
    chuanbo() {
      let params = {
        entName: this.entname
      }
      api.getriskPropagateDescribe(params).then(rtn => {
        this.chuanboTotal = rtn.data
      })
    },
    // 新增企业风险综合描述
    getriskDescribe() {
      this.isShowLoading = true
      this.jingying()
      this.yuqing()
      this.guanlian()
      this.chuanbo()
      this.isShowLoading = false
    },
    changecolor(ind) {
      this.states.map(state => {
        state.flag = false
      })
      this.states[ind].flag = true
      this.state = this.states[ind].name
    },
    // 基本信息
    getInfoLists() {
      let params = {
        // entId: 1,
        entName: this.entname
      }
      // 左侧基本信息
      api.getBusinessInfobase(params).then(rtn => {
        this.baseInfo = rtn.data
      })
      // 经营地址
      api.getReallyAddress(params).then(rtn => {
        if (typeof rtn.data !== 'undefined' && rtn.data !== 'null') {
          this.address = rtn.data
        }
      })
      // 右侧基本信息
      api.getRiskBaseinfo(params).then(rtn => {
        // console.log(rtn.data)
        this.riskInfo = rtn.data
        this.entid = rtn.data.id
        this.riskInfo.statusWord = this.status[this.riskInfo.controlStatus]
      })
      mpi.getoprateCaseProcessInfo({id: this.id}).then(ret => {
        if (ret.data) {
          // 排查情况
          this.controlstit = ret.data.controlStatus
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 下载报告
    reportDownloads(type, num) {
      // const params = {
      //   entName: this.entname
      // }
      this.$msgbox({
        title: '系统提示',
        message: '<span>由于文件过大导致下载时间过长，请耐心等待</span>',
        center: true,
        roundButton: true,
        customClass: 'messageBox',
        type: 'info',
        dangerouslyUseHTMLString: true,
        callback: () => {}
      })
      // console.log(params + ',' + type + ',' + num)
      // api.xxx(params).then(res => {
      // location.href =
      //   this.baseUrl +
      //   '/xxx/xxx?name=' +
      //   res.data +
      //   num +
      //   '&entName=' +
      //   this.entname
      // http://192.168.4.20:8007/riskquery_api  天津商科数控技术股份有限公司
      // }).catch(res => {
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
  .manageList{
    padding: 20px 2px 20px 2px;
    width: 100%;
    .dialog {
      width: 600px;
    }
    .detail-dialog {
      h5 {
        font-weight: bold;
        padding: 10px 0;
      }
      span {
        margin: 0 10px;
      }
      .ent-name {
        padding-left: 15px;
        width: 70%;
      }
      .btn {
        width: 100%;
        text-align: center;
        margin-top: 20px;
      }
      .save-btn {
        width: 50%;
      }
    }
    /deep/ .el-dialog__header {
      padding: 10px;
      background: #3f8ffa;
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn {
        top: 12px;
        i {
          color: #fff;
        }
      }
    }
    .table-wrap {
      padding: 30px 20px;
      table {
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        td,
        th {
          border: 1px solid #e2e2e2;
          line-height: 40px;
          padding-left: 10px;
        }
        th {
          line-height: 38px;
          color: #999;
          background: #f2f1f1;
        }
      }
    }
    .upfiles {
      text-decoration: underline;
      color: #1891ef;
    }
    .presentation {
      background-color: #3f8efa;
      color: white;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      padding:5px 10px;
      span {
        margin-left: 5px;
      }
    }
    .manage-top {
      width: 100%;
      height: auto;
      margin-top: 10px;
      .states {
        list-style-type: none;
        border-top: 2px solid #40A1FA;
        margin: 0;
        padding: 0;
        li {
          position: relative;
          float: left;
          text-align: center;
          width: 25%;
          padding-top: 15px;
          b:before {
            content: '';
            position: absolute;
            top: -12px;
            left: 45%;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ccc;
          }
        }
        .active:before{
          background: #0033cc;
          cursor: pointer;
        }
      }
    }
    .manage-bottom {
      margin-top: 60px;
      .lists {
        height: 100%;
        flex-grow: 61.49;
        padding: 10px 30px 15px 30px;
        position: relative;
        h3 {
          font-size: 16px;
          font-weight: bold;
          height: 56px;
          display: flex;
          align-items: center;
          // justify-content: center;
          margin-bottom: 10px;
          position: relative;
          .returnBtn {
            // width: 120px;
            position: absolute;
            right: 0;
            top: 10px;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            color: #1891ef;
            font-weight: 400;
            // background-color: #3f8efa;
            // color: white;
            // border-radius: 5px;
          }
        }
        .info-list {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          li {
            width: 630px;
            height: 34px;
            font-size: 14px;
            line-height: 34px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            span {
              display: inline-block;
              width: 85px;
              color: #a6a6a6;
              &.big {
                width: 115px;
              }
              &.hot-number {
                font-size: 22px;
                color: #ff3300;
                font-weight: bold;
              }
            }
            &.min {
              min-width: 600px;
            }
            // &.long {
            //   width: 650px;
            // }
          }
          .riskNum {
            line-height: 21px;
            .icon {
              background-image: url("../../assets/images/yujing.png");
              height: 30px;
              width: 103px;
              position: absolute;
              right: 0;
              top: 0;
            }
            .icon-risk {
              width: 30px;
              height: 30px;
              background: url(../../assets/images/risk.png) no-repeat;
              background-size: 100% 100%;
              vertical-align: middle;
              // position: absolute;
              left: 72px;
              top: -2px;
            }
          }
        }
      }
      .bottom {
        padding: 10px 0;
        margin-top: 20px;
      }
      .detail-con {
        width: 100%;
        background-color: #ffffff;
        border-radius: 5px;
        // margin-top: 20px;
        padding: 0 35px 20px;
        box-sizing: border-box;
        .detailbase {
          width: 100%;
          position: relative;
          .pridown {
            position: absolute;
            right: 0;
            bottom: 10px;
          }
        }
        h4.detail-base-title {
          line-height: 30px;
          font-size: 16px;
          font-weight: bold;
          padding: 30px 0 0 12px;
          position: relative;
          background-image: linear-gradient(0deg, #1891ef, #1891ef);
          background-size: 3px 16px;
          background-position: 0 37px;
          background-repeat: no-repeat;
          border-bottom: 1px solid #eee;
        }
        .table-wrap {
          padding: 30px 20px;
          position: relative;
          table {
            border-collapse: collapse;
            width: 100%;
            text-align: center;
            td,
            th {
              border: 1px solid #e2e2e2;
            }
            th {
              color: #999;
              background-color: #f5faff;
            }
            td.long {
              text-align: left;
              padding: 10px;
              line-height: 24px;
            }
            &.business {
              th {
                width: 232px;
              }
              td {
                text-align: left;
                padding-left: 20px;
              }
              tr {
                line-height: 45px;
              }
            }
          }
        }
      }
      .troubleshoot {
        padding: 5px 30px 15px 45px;
        height: auto;
        ul li {
          height: 32px;
          font-size: 14px;
          line-height: 32px;
          position: relative;
        }
        ul li span {
          display: inline-block;
          width: 85px;
          color: #a6a6a6;
        }
        .files {
          a {
            margin-right: 15px;
          }
        }
      }
      .troubledown {
        padding: 5px 30px 15px 45px;
        height: auto;
        .table {
          border-radius: 3px;
          margin-bottom: 20px;
          border-collapse: collapse;
          width: 100%;
          text-align: center;
          td,
          th {
            border: 1px solid #e2e2e2;
            text-align: center;
            padding: 10px;
          }
          th {
            color: #999;
            background-color: #f5faff;
          }
        }
      }
      .pigeonhole {
        padding: 5px 30px 15px 45px;
        height: auto;
        .pl {
          padding-left: 20px;
        }
        .pr {
          padding-right: 20px;
        }
        .center {
          text-align: center;
        }
        .wid100 {
          width: 100px;
          margin: 0 20px;
        }
      }
    }
  }
</style>


// WEBPACK FOOTER //
// src/view/managements/manageList.vue